<template>
	<view class="content">
		<view class="part">
			<u-subsection fontSize="30" :list="deviceKindList" mode="button" :current="deviceKindIndex"
				@change="deviceKindChange">
			</u-subsection>
		</view>
		<!-- 设备列表部分 -->
		<view class="addDeviceBox">
			<!-- 穿戴设备 -->
			<view v-if="deviceKindIndex == 0">
				<view class="device_list" v-for="(item,index) in devicesList" :key="index">
					<view class="device_card">
						<view class="device_left">
							<view class="device_left_avatar">
								<image class="device_left_avatar_image" mode="aspectFit"
									src="/static/img/x1_avatar.png"></image>
							</view>
							<view class="device_left_content">
								<text class="device_left_content_title">型号:X1</text>
								<text class="device_left_content_subtitle">厂商:爱牵挂</text>
							</view>
						</view>
						<view class="device_right">
							<button class="mini-btn" type="default" size="mini"
								@click="unbindDevice(item.imei,item.imeiType)">解绑</button>
						</view>
					</view>
				</view>

				<u-icon class="common-icon" name="plus-circle-fill" size="190" color="rgb(180, 180, 180)" label="添加新设备"
					labelSize="40" labelPos="bottom" @click="dialogInputOpen"></u-icon>
			</view>
			<!-- 其他设备 -->
			<view v-else-if="deviceKindIndex == 1">
				<u-icon class="common-icon" name="close-circle-fill" size="190" color="rgb(180, 180, 180)" label="暂未开放"
					labelSize="40" labelPos="bottom"></u-icon>
			</view>
		</view>


		<view>
			<!-- 输入框示例 -->
			<uni-popup ref="inputPopup" type="dialog">
				<uni-popup-dialog ref="inputDialog" mode="input" title="您可以在盒包装上找到设备号" @confirm="dialogInputConfirm">
					<view style="display: block; width: 100%;">
						<image src="@/static/img/how_to_bind_imei.jpg" mode="widthFix" style="width: 100%;"></image>
						<uni-easyinput class="uni-mt-5" suffixIcon="scan" v-model="imei2bind" placeholder="您可以点右侧图标扫码"
							@iconClick="doScan">
						</uni-easyinput>
					</view>
				</uni-popup-dialog>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				deviceKindList: ["穿戴设备", '其他设备'],
				deviceKindIndex: 0,
				imei2bind: "",
				hasDevices: 0,
				devicesList: [],
				token: ""
			}
		},
		//登录状态直接获取绑定设备
		mounted() {
			this.token = uni.getStorageSync('token');
			this.showDevicesList();
		},
		methods: {
			deviceKindChange(index) {
				this.deviceKindIndex = index
			},
			dialogInputOpen() {
				this.$refs.inputPopup.open()
			},

			//列表加载
			showDevicesList() {
				uni.$u.http.get(`${this.urlConfig.appServerPrefix}/mduser/selectDeviceList`, {
					header: {
						"token": this.token
					}
				}).then(res => {
					this.devicesList = res.data.extend.userDeviceList;
				})
			},

			dialogInputConfirm(value) {
				this.hasDevices = 1;
				if (!this.imei2bind) {
					uni.showToast({
						title: '设备号不能为空',
						icon: 'error'
					})
				} else {
					// 目前只有一种设备，暂时固定设备类型
					uni.$u.http.post(`${this.urlConfig.appServerPrefix}/mduser/bindDevice`, {
						imei: this.imei2bind,
						imeiType: '1'
					}, {
						header: {
							'token': this.token
						}
					}).then(res => {
						if (res.data.code == 100) {
							uni.showToast({
								title: '添加成功'
							})
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'error'
							})
						}
						// 不管怎样，最后刷新一下列表
						this.showDevicesList();
					}).catch(err => {
						console.log(err)
					})
				}
			},
			unbindDevice(_imei, _imeiType) {
				uni.showModal({
					title: '提示',
					content: '确定解绑?',
					success: res => {
						if (res.confirm) {
							uni.$u.http.post(`${this.urlConfig.appServerPrefix}/mduser/unbindDevice`, {
								imei: _imei,
								imeiType: _imeiType
							}, {
								header: {
									'token': this.token
								}
							}).then(res => {
								if (res.data.code == 100) {
									uni.showToast({
										title: '解绑成功'
									})
								} else {
									uni.showToast({
										title: res.data.msg,
										icon: 'error'
									})
								}
								// 不管怎样，最后刷新一下列表
								this.showDevicesList();
							}).catch(err => {
								console.log(err)
							})
						} else if (res.cancel) {}
					}
				});
			},
			doScan() {
				uni.scanCode({
					scanType: ['barCode'],
					success: (res) => {
						this.imei2bind = res.result
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		width: 710rpx;
		background-color: #FAFAFA;
		padding: 20rpx;
		height: calc(100vh - 40rpx);
	}

	.addDeviceBox {
		.common-icon {
			margin: 10rpx 0;
			padding: 30rpx;
			width: 650rpx;
			height: 350rpx;
			background-color: #ffffff;
			border-radius: 30rpx;
			box-shadow: #fafafa;
		}
	}

	.part {
		padding: 20rpx 10rpx 30rpx 30rpx;
		width: 650rpx;
		margin: 15rpx 0;
	}

	.device_list {
		margin: 15px;
		padding: 0 10px;
		box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.08);
	}

	.device_list {
		.device_card {
			display: flex;
			border-bottom: 1px #EBEEF5 solid;
			flex-direction: row;
			align-items: center;
			padding: 10px;
			overflow: hidden;
		}

		.device_left {
			display: flex;
			flex: 1;
			flex-direction: row;
			align-items: center;
			overflow: hidden;
		}

		.device_left_avatar {
			width: 40px;
			height: 40px;
			overflow: hidden;
			border-radius: 5px;
			margin-right: 10px;
		}

		.device_left_avatar_image {
			flex: 1;
			width: 40px;
			height: 40px;
		}

		.device_left_content {
			display: flex;
			flex-direction: column;
			justify-content: center;
			flex: 1;
			overflow: hidden;
		}

		.device_left_content_title {
			font-size: 15px;
			color: #3a3a3a;
		}

		.device_left_content_subtitle {
			font-size: 12px;
			margin-top: 5px;
			color: #909399;
		}

		.device_right {
			line-height: 12px;
		}

		.device_right_content {
			font-size: 12px;
			color: #909399;
		}
	}
</style>
